<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!-- react核心库[不能操作dom,也不能渲染] -->
    <script src="../ExternalLibrary/js/react.js"></script>
    <!-- react操作dom库[操作dom,渲染页面]] -->
    <script src="../ExternalLibrary/js/react-dom.js"></script>
    <!-- 编译语法库 -->
    <script src="../ExternalLibrary/js/babel.js"></script>
    <!-- 此处type="text/babel" 表示该标签中的内容交给babel.js翻译,翻译成低版本的浏览器也支持的语法 -->
    <script type="text/babel">
        let oDiv = document.getElementById("div1");
        //可以与入门1对比,此时oSpan是个组件,可以console.log(oSpan)证明
        let oSpan = <span>bbbbb</span>
        console.log(oSpan);
        ReactDOM.render(oSpan,oDiv);


        // 这种方案是不可以的,因为此时是个元素可以打印查看
        let oSpan1 = document.createElement('span');
        oSpan1.innerHTML = "bbbbb";
        console.log(oSpan1);
        ReactDOM.render(oSpan,oDiv);


    </script>
</head>
<body>
    <div id = "div1">

    </div>
</body>